<script setup>
import { computed } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'default'
  },
  size: {
    type: String,
    default: 'medium'
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const classes = computed(() => ({
  'm-button': true,
  [`m-button--${props.type}`]: true,
  [`m-button--${props.size}`]: true,
  'm-button--disabled': props.disabled
}))
</script>

<template>
  <button :class="classes" :disabled="disabled">
    <slot></slot>
  </button>
</template>

<style scoped>
.m-button {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.m-button--primary {
  background-color: #1677ff;
  color: white;
}

.m-button--secondary {
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  color: #000000;
}

.m-button--default {
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  color: rgba(0, 0, 0, 0.88);
}

.m-button--small {
  padding: 4px 12px;
  font-size: 14px;
}

.m-button--medium {
  padding: 6px 16px;
  font-size: 14px;
}

.m-button--large {
  padding: 8px 20px;
  font-size: 16px;
}

.m-button--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.m-button:hover:not(.m-button--disabled) {
  opacity: 0.8;
}
</style> 